<template>
  <div class="goodsCtrl">
    <!---------------------------------------------------------------------------------------- 以下是table -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="商品查询">
        <el-select v-model="formInline.region" placeholder="选择条件">
          <el-option label="类型" value="shanghai"></el-option>
          <el-option label="名称" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="formInline.user" :hide-required-asterisk="true" placeholder="请输入搜索内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!---------------------------------------------------------------------------------------- 以下是table -->
    <!-- :data="currentData"---表格需要的数据来子data中的xxx -->
    <el-table :data="currentData" border style="width: 100%" highlight-current-row>
      <el-table-column prop="g_id" label="编号"></el-table-column>
      <el-table-column prop="g_imgSrc" label="图片">
        <!-- 图片的显示 -->
        <template slot-scope="scope">
          <img :src="scope.row.g_imgSrc" width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column prop="g_name" label="名称"></el-table-column>
      <el-table-column prop="g_pPrice" label="进价"></el-table-column>
      <el-table-column prop="g_sPrice" label="售价"></el-table-column>
      <el-table-column prop="g_sole" label="售出"></el-table-column>
      <el-table-column prop="g_inventory" label="库存"></el-table-column>
      <el-table-column prop="g_type" label="类型"></el-table-column>
      <el-table-column label="操作" width="160px">
        <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- 
            background---设置背景颜色
            hide-on-single-page---只有一页时隐藏分页
            :total---总数据数量
            :page-size---每页显示数据的条数
            :pager-count---最大可见页码数
            @current-change---currentPage改变时会触发(会自动获得页码)
            :current-page---当前页
      -->
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="pageNum"
        :page-size="pageSize"
        :pager-count="pageCount"
        @current-change="changePage"
        :current-page="currentPaeg"
      ></el-pagination>
    </div>
  </div>
</template>
 
<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "HpGoodslist",
  computed: {
    currentData() {
      let start = (this.currentPaeg - 1) * this.pageSize;
      let end = this.currentPaeg * this.pageSize;
      return this.$store.state.hpGoodStore.tableState.slice(start, end);
    },
    pageNum() {
      return this.$store.state.hpGoodStore.tableState.length;
    }
  },
  data() {
    return {
      currentPaeg: 1, //当前页
      pageSize: 5, //显示数据条数
      pageCount: 7, //页码最大显示数
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  methods: {
    ...mapActions(["getGoodsDataActions"]),
    handleEdit() {},
    handleDelete(index, item) {
      console.log(index, item.g_id);
      this.$confirm("删除后不可恢复，是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除失败"
          });
        });
    },
    changePage(val) {
      this.currentPaeg = val;
    },
    onSubmit() {
      console.log("submit!");
    }
  },
  created() {
    this.getGoodsDataActions();
  }
};
</script>
 
<style scoped lang = "less">
.el-table {
  margin: auto;
}
</style>